<extend name="Public/base" />
<block name="style">
<style>
.content{
  display: block;
  width:100%;
  margin-top: 15px;
  overflow: hidden;
   white-space: nowrap;
  text-overflow: ellipsis;
}
.content2{
  font-size: 20px;
  display: block;
  margin-top: 15px;
  width:100%;
  overflow: hidden;
   white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
</block>
<block name="body">
<!--图片内容  及具体样式自己去换  基本大块 都有背景色  怕你区分不开   你自己去换掉 或者不要 链接自己去换-->
<body>
  <div class="head_wrap row">
    <div class="head_logo col-sm-4">
      <!-- <img src="__PUBLIC__/img/lunbo_02.jpg" alt=""> -->
      <h1>回忆是一种幸福</h1>
    </div>
    <div class="head_search col-sm-8">
      <div class="search_content row">
        <div class="col-xs-12 col-sm-8">
          <div class="input-group">
            <input type="text"  class="form-control search-query" placeholder="">
            <span class="input-group-btn">
              <button type="button" class="btn btn-purple btn-sm">
                搜索
                <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="center_wrap row">
    <div class="title">
      <p class="center_title">
        <span>{$name}</span>
       
      </p>

    </div>
    <div class="col-sm-12">
      <div class="groupimg_content">
        <div class="row" >
          <!--原图容器-->

          <div class="col-sm-12 largeImg" style="display: none">
            <img class="largeImgContent" src="" alt="">
          </div>

          <!--缩略图 引用bootstrap缩略图   调整列数控制每行显示几张图片-->
          <div id="list">
          <volist name="list" id="vo">
            <div class="col-sm-6 col-md-3 imgContent">
              <a href="#" class="thumbnail ">
                <img src="__PUBLIC__/{$vo.thumb_url}" alt="..." onerror="this.src='__PUBLIC__/img/moren.jpg'">

                 <if condition="$title eq zutu">
                    <div class="caption">
                      <h3>{$vo.zutu_name}</h3>
                      <p class="content">{$vo.zutu_title}</p>
                    </div>
                <else/>
                     <span style="position:absolute;left:0;top:140px;width:100%;height:30%;background:rgba(0,0,0,.3);display:none;text-align:center;margin-top:0px;color:#fff;font-size:15px;">
                      {$vo.title}
                    </span> 
                </if>
              </a>
            </div>
          </volist>
          </div>
            <div class="col-sm-6 col-md-3 imgContent" id="insert_div" style="display:block;">
              <a href="#" class="thumbnail smallImg"  id="insert_img">
               <if condition="empty($nodata) eq true">
                  <img src="__PUBLIC__/img/insert.png" style="width:180px;height:180px;" tilte="点击添加" />
               <else/>
                  <img src="__PUBLIC__/img/onload.png" style="width:180px;height:180px;" tilte="没有数据" />
                </if>
              </a>
            </div>
        </div>
      </div>
    </div>

  </div>
</body>
</block>

<block name="script">
  <script src="__PUBLIC__/js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">

    var url ="{u:('img_list')";
    var page_now = 2;
  $(function(){
    //鼠标放上去显示标题
    $(".thumbnail").bind('mousemove',function() {
      $(this).children('span').show();
    });
    $(".thumbnail").bind('mouseleave',function(event) {
      $(this).children('span').hide();
    });
//点击添加图片
    var title = "{$title}";
     $('#insert_img').bind('click',{"title":title},load_img);




//显示图片特效
/*    $(".smallImg").width() = "200px";
    $(".smallImg").height() = "267px";

    $(".smallImg").unbind("click").bind("click",function(){
      var src = $(this).find("img").attr("src");
      $(this).parent().siblings(".largeImg").find("img").attr("src",src);
      $(this).parent().siblings(".largeImg").css("display","block");

      $(this).parent().parent().find(".smallImg").hide();
      $()

    })

    $(".largeImgContent").unbind("click").bind("click",function(){
      $(this).parent(".largeImg").css("display","none");
      $(this).parent().parent().find(".smallImg").show();

    })*/

    // $("img").hover(function() {
    //   alert(123);
    // }, function() {
    //   alert(435);
    // });
/*    $(".newimg_content img").bind("mouseenter",function(e){
      debugger;

        $(this).parent().parent().find('.imgLayout').css({"display":"block","width":$(this).parent().width()+10,"height":$(this).parent().height()+10});
    })
    $(".newimg_content .imgLayout").bind('mouseleave', function(e) {
        $(this).css("display","none");
    });*/


    // $(".newimg_content img").bind("mouseleave",function(e){
    //   debugger;
    //   var loEL = document.elementFromPoint(e.clientX,e.clientY);
    //     var n = loEL.nodeName;
    //     var m = element.getAttribute("sty");
    //     if(m != "imgBook"){
    //       $(this).parent().parent().find('.imgLayout').css("display","none");       
    //     }
        
    // })
})
//点击添加图片加载更多
function load_img(d){
  //获取到是什么类型
  var title = d.data.title;
  var result = "";
  var len = "";
  //将添加的图片隐藏
  $(this).parent().hide();
  //请求数据
  $.ajax({
    url: url,
    type: 'get',
    dataType: 'json',
    data: {'title': title,
           'page_now':page_now
          },
    complete: function(xhr, textStatus) {
      //called when complete
    },
    success: function(data) {
      if(data == 0){
        $('#insert_img').find('img').attr('src','__PUBLIC__/img/onload.png');
        $('#insert_img').unbind('click');
        $('#insert_div').show();
        //alert('没有内容啦');                 
      } 
                  
                
    $.each(data, function (n, value) {
             var result = '<div class="col-sm-6 col-md-3 imgContent"><a href="#" class="thumbnail smallImg"><img src="__PUBLIC__/'+value.thumb_url+'" alt="..." onerror="this.src=\'__PUBLIC__/img/moren.jpg\'"><span style="position:absolute;left:0;top:140px;width:100%;height:30%;background:rgba(0,0,0,.3);display:none;text-align:center;margin-top:0px;color:#fff;font-size:15px;">'+value.title+'</span><if condition="$title eq zutu"><div class="caption"><h3>{$vo.zutu_name}</h3><p>{$vo.zutu_title}</p></div></if></a></div>';
             $('#list').append(result);
             len ++;
           });
    $(".thumbnail").unbind("mousemove").bind('mousemove',function() {
      $(this).children('span').show();
    });
    $(".thumbnail").unbind("mouseleave").bind('mouseleave',function() {
      $(this).children('span').hide();
    });
    if(len < 3){
         $('#insert_img').find('img').attr('src','__PUBLIC__/img/onload.png');
        $('#insert_img').unbind('click');
        //$('#insert_div').show();
    }
      $('#insert_div').show(); 
      page_now ++;
    },
    error: function(xhr, textStatus, errorThrown) {
      //called when there is an error
    }
  });
  

}
</script>
</block>




